<template>
    <div id="add-camera-equipment">
        <el-dialog
            :title="$t('2NpYm96AAwjCn0En3Rdy')"
            v-model="isShowDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="50%" 
            :destroy-on-close="true"
            @close="handleClose"
        >
            <el-form :model="ruleForm" ref="ruleFormRef" size="default" label-width="120px" :rules="rules">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label="$t('ztu0TpvwBrwVxA1Hahd4A')" prop="v_Name">
                            <el-input v-model="ruleForm.v_Name" :placeholder="$t('ztu0TpvwBrwVxA1Hahd4A')" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label="$t('anzVirgNbenjNuTUq8hSf')" prop="v_BrandName">
                            <el-input v-model="ruleForm.v_BrandName" :placeholder="$t('anzVirgNbenjNuTUq8hSf')" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label="$t('liRos24Dz6C9xVjHwNx')" prop="v_Region">
                            <el-input v-model="ruleForm.v_Region" :placeholder="$t('liRos24Dz6C9xVjHwNx')" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label="$t('wmd4Ixon01TmSHk82nKh')" prop="n_Sort">
                            <el-input type="number" v-model="ruleForm.n_Sort" :placeholder="$t('wmd4Ixon01TmSHk82nKh')" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label="$t('uDJY2uHey5cDkM2Yhp2w')">
                            <el-input type="textarea" v-model="ruleForm.v_Remark" :placeholder="$t('uDJY2uHey5cDkM2Yhp2w')" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <el-button @click="handleClose">{{ $t('bg0dCh9NzdUyGoIvsnNRl') }}</el-button>
                <el-button type="primary" :disabled="repeatDis" @click="submitForm(ruleFormRef)">{{ $t('ljWCcNnwiuLtut076mHBn') }}</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRefs, toRaw } from 'vue'
import { FormInstance, FormRules } from 'element-plus'
import { CameraAdd } from '/@/api/its/camera'

export default defineComponent( {
    name: 'add-camera-equipment',
    props: {
        isShowDialog:{
            type: Boolean,
            default: false,
        },
    },
    setup(props,ctx){
        const ruleFormRef = ref()

        /*** state 引用接口定义基础数据初始值 */
        const state = reactive ({
            repeatDis: false,
            ruleForm: {
                v_Name: '',
                v_BrandName: '',
                v_Region: '',
                n_Sort: 1,
                v_Remark: '',
            } 
        })

        /*** 基础验证 rules */
        const rules = reactive  ({
            /*** 放置验证 */
            // 设备名称
            v_Name: [
				{ required: true, message: window.$t('ee91KfEg7kpUrcDnVpgK'), trigger: 'blur' },
			],
            // 品牌名称
            v_BrandName: [
				{ required: true, message: window.$t('eCuWkElgvtLoDhQ1BkN3y'), trigger: 'blur' },
			],
            // 监控区域
            v_Region: [
				{ required: true, message: window.$t('hXppYddwWrDfs9m7eBsNu'), trigger: 'blur' },
			],
            // 序号
            n_Sort: [
				{ required: true, message: window.$t('faLfLc6rDuBo2P3nFyph'), trigger: 'blur' },
			],
        })

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            ruleFormRef.value.resetFields()
            closeEvent()
        }

        /*** closeEvent 取消事件 */
        const closeEvent = () => {
            ctx.emit('close')
        }

        /*** submitForm 提交事件 */
        const submitForm = (formEl: FormInstance | undefined) => {
            if(!formEl) return
            formEl.validate( async (valid) => { 
                if(valid){
                    state.repeatDis = true
                    let param = toRaw(state.ruleForm)
                    let res: any = null
                    try {
                        res = await CameraAdd(param)
                    }finally {
                        state.repeatDis = false
                    }
                    
                    if(res.success){
                        ctx.emit('close','success')
                        ctx.emit('updateData')
                    }
                }else{
                    console.log('error submit!')
                }
            })
        }

        return {
            handleClose,
            submitForm,
            ruleFormRef,
            ...toRefs(state),
            rules,
        }
    },
} )
</script>
<style scoped lang="scss">
#add-camera-equipment{
    :deep(.el-select){
        width: 100%;
    }
    :deep(.el-input){
        width: 100%;
    }
}
</style>